---
title: Sorting tables
description: A guide on how to use Fluid DnD for sort tables.
---

import SortingTable from "@/components/svelte/SortingTable.svelte";
import { Code } from "@astrojs/starlight/components";

### Table with person data

To showing how to use **Fluid DnD** for sorting a table.
First, we're going to create a table with person data:

export const listOfNumbers = `<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

type Person = {
  name: string;
  age: number;
  alias: string;
};
const table = $state<Person[]>([
  { name: "Carlos", age: 26, alias: "Carli" },
  { name: "Jorgito", age: 34, alias: "Pipo" },
  { name: "Ivis", age: 68, alias: "Mamá" },
]);

const [ parent ] = useDragAndDrop<Person>(table, {
  draggingClass: "drag-row",
});

</script>`;

<Code code={listOfNumbers} lang="svelte" />

## Creating the view

Next, create a table on the view section:

export const tableView = `
<table class="table-auto border-collapse">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Alias</th>
      </tr>
    </thead>
  <tbody use:parent>
    {#each table as person, index (person.name) }
      <tr data-index={index}>
        <td>{ person.name }</td>
        <td>{ person.age }</td>
        <td>{ person.alias }</td>
      </tr>
    {/each}
  </tbody>
  </table>
<style scoped>
/*...*/
table tbody tr td {
  width: 33.3%;
}
.drag-row {
  background-color: var(--sl-color-text-accent) !important;
  color: var(--sl-color-text-invert);
  display: table;
}

</style>
`;

<Code code={tableView} lang="svelte" />

:::caution
Set a fixed width to `tr` and `td` elements because it maintains the proportion of the columns when the row is dragged.
Set display property to `table` to `drag-row` class selector treating the dragged row as a table.
:::

### Preview

<div class="pl-8">
  <SortingTable client:load />
</div>
